<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>随机点名</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <!-- <link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        &lt;!&ndash; 可选的 Bootstrap 主题文件（一般不用引入） &ndash;&gt;
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        &lt;!&ndash; 最新的 Bootstrap 核心 JavaScript 文件 &ndash;&gt;
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
       -->
</head>
<style>
    body {
        overflow: hidden; /*当内容溢出时，不显示*/
    }

    .pv {
        position: fixed;
        top: 50%;;
        margin-top: -300px;
        margin-left: -400px;
        left: 50%;
        width: 800px;
        height: 600px;
        border-radius: 20px;
        /*   background-color: #0ca5f5;*/
    }

    button{
        outline: none
    }

    #canvas {
        position: fixed;
        top: 0;
        left: 0;
        z-index: -1;
    }

    #start {
        border-radius: 5px;
        border: 2px dashed #2d8cf0;
        background-color: peachpuff;
        width: 180px;
        height: 64px;
        font-size: 18px;
        color: #f00;
        margin: 5px;
    }

    #stop {
        border-radius: 5px;
        border: 2px dashed #2d8cf0;
        background-color: #2baee9;
        width: 180px;
        height: 64px;
        font-size: 18px;
        color: #ffffff;
        margin: 5px;

    }
</style>
<body>

<div class="pv" style="padding-top: 10px">
    <p id="num" style="color: #ffffff;text-align: center;font-size: 100px"></p>
    <div style="text-align: center;margin-top: 50px">
        <button id="start" class="btn btn-success">开始</button>
    </div>
</div>


<canvas width=400 height=400 style="background: #000000;" id="canvas"></canvas>
</body>
<script type="text/javascript">
    var num = document.getElementById("num");
    var start = document.getElementById("start");
    var di = ["何靖", "王小刚", "董保江", "韩丽", "李云龙", "赵刚"];
    var gao = ["文永洪", "吴涛", "康德州", "吴瑞", "周鹏", "王嘿"];

    var random = randomNum(1, 10);
    if (random >= 1 && random <= 4) {
        num.innerHTML = di[randomNum(0, 5)];
    } else {
        num.innerHTML = gao[randomNum(0, 5)];
    }

    var intv = null;
    /*生成范围的随机数*/
    function randomNum(minNum, maxNum) {
        switch (arguments.length) {
            case 1:
                return parseInt(Math.random() * minNum + 1, 10);
                break;
            case 2:
                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                break;
            default:
                return 0;
                break;
        }
    }

    start.onclick = function () {
        if (intv) {
            start.innerHTML="开始";
            clearInterval(intv);
            intv = null;
        }else {
            start.innerHTML="停止";
            intv = setInterval(function () {
                var random = randomNum(1, 10);
                if (random >= 1 && random <= 4) {
                    num.innerHTML = di[randomNum(0, 5)];
                } else {
                    num.innerHTML = gao[randomNum(0, 5)];
                }
                console.log("打印数据" + num.innerHTML);
            }, 50);
        }
    }

    /* 下面是流星雨代码 */

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var s = window.screen;
    var w = s.width;
    var h = s.height;
    canvas.width = w;
    canvas.height = h;
    var fontSize = 14;
    var clos = Math.floor(w / fontSize);
    var drops = [];
    var str = "qwertyuioplkjhgfdsazxcvbnm";
    for (var i = 0; i < clos; i++) {
        drops.push(0);
    }
    function drawString() {
        ctx.fillStyle = "rgba(0,0,0,0.05)"
        ctx.fillRect(0, 0, w, h);
        ctx.font = "600 " + fontSize + "px 微软雅黑";
        ctx.fillStyle = "#00ff00";
        for (var i = 0; i < clos; i++) {
            var x = i * fontSize;
            var y = drops[i] * fontSize;
            ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
            if (y > h && Math.random() > 0.99) {
                drops[i] = 0;
            }
            drops[i]++;
        }

    }
    setInterval(drawString, 30);
</script>

</html>